<template>
  <div class="dialog" v-if='configure'>
    <div style="margin-top: 20px;">
      <el-form label-width="100px">
        <el-form-item label-width="76px" label="资源类型:" prop="projectname">
          <el-button size="small" v-for="(item,index) in types" :key="index" v-if="!editFlag||typeIndex==index"
            @click="typeIndex=index" :type="typeIndex==index?'primary':''" plain>{{item.name}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>{{types[typeIndex].name}}</div>
      </div>
      <div v-show="typeIndex==0" style="padding: 20px 20px;width: 100%;">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="可用域:">
            <el-select v-model="form.availableDomain" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in configure.available_domain" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="规格分类:">
            <div style="display: flex;padding-top: 8px;">
              <el-radio-group v-model="form.cloudFlavorCode" @change="cloudFlavorCodes">
                <el-radio v-for="(item,index) in configure.codeList"  :key="index" :label="item.specCode">
                  {{item.specName}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item> -->
          <el-form-item label="规格:" prop="Specifications">
            <el-select v-model="form.Specifications" placeholder="请选择规格" size="mini" @change="ChangeSpecifications" style="width: 200px;">
              <el-option v-for="item in configure.SpecificationsList"
                  :key="item.specName"
                  :label="item.specName"
                  :value="item.specName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="CPU架构:" prop="cpuServerCode">
            <el-select v-model="form.cpuServerCode" placeholder="请选择CPU架构" size="mini" style="width: 200px;">
                <el-option v-for="item in configure.CpuFrameworkList"
                    :key="item.code"
                    :label="item.remark"
                    :value="item.code">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="系统盘:" prop="osDisk">
            <div style="display: flex;">
              <el-select v-model="form.osDisk.diskServerCode" placeholder="请选择系统系统盘类型" size="mini" style="width: 200px;">
                <el-option v-for="item in configure.storage_type" :key="item.code"
                  :label="item.serviceName ?item.serviceName : item.dictLabel " :value="item.code">
                </el-option>
              </el-select>
              <el-select v-model="form.osDisk.dataDiskSize" placeholder="请选择系统盘容量" size="mini"
                style="width: 200px;margin: 0 10px;">
                <el-option v-for="item in [160,100]" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>GB
            </div>
          </el-form-item>
          <el-form-item label="操作系统:" prop="osType">
            <el-select style="width: 200px;" v-model="form.osType" @change="cascaderChange($event,'form')" placeholder="请选择操作系统版本" size="mini">
              <el-option
                v-for="item in this.configure.czxtList"
                :key="item.serviceNumber"
                :label="item.serviceName"
                :value="item.serviceNumber">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作系统版本:" prop="osName">
            <!-- 请选择操作系统版本 -->
            <el-select v-model="form.osName" @change="ChangeCzxtVersion($event,'form')" placeholder="请选择操作系统版本" size="mini" style="width: 200px;">
              <el-option
                v-for="item in this.CzxtVersion"
                :key="item.code"
                :label="item.serviceName"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据盘:">
            <div>
              <span>你已选择<span style="color: #E83112;">{{form.disks.length}}</span>块，还可以选择<span
                  style="color: #E83112;">{{16-form.disks.length}}</span>块</span>
              <div v-for="(item,index) in form.disks" :key="index"
                style="margin-top: 10px;display: flex;line-height: 28px;">
                <a @click="form.disks.splice(index,1)"><i class="el-icon-remove"></i></a>
                <el-select v-model="item.diskServerCode" placeholder="请选择" size="mini" style="width: 160px;">
                  <el-option v-for="it in configure.ccList" :key="it.code" :label="it.serviceName" :value="it.code">
                  </el-option>
                </el-select>
                <el-input size="mini" maxlength='7' style="width: 150px;margin-left:20px" @blur="inputNumber($event)" v-model="item.dataDiskSize"></el-input>GB
              </div>
              <div style="margin: 10px 0;display: flex;line-height: 28px;">
                <a v-show="form.disks.length<16"
                  @click="form.disks.push({diskServerCode:configure.ccList[0].code,dataDiskSize:'500'})">
                  <i class="el-icon-circle-plus" style="color: #3a8dfd;"></i>
                </a>
                <span v-show="form.disks.length<16">增加一块数据盘</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="!editFlag" label="主机别名:" prop="instanceName">
            <el-input style="width: 200px;" placeholder="请输入" v-model="form.instanceName">
            </el-input>
          </el-form-item>
          <el-form-item v-show="!editFlag" label="数量(1~50):" prop="instanceNum">
            <el-input @input="InputUnstanceNum" style="width: 200px;" size="mini" type="number" min="1" max="50" placeholder="请输入申请的服务器数量"
              v-model="form.instanceNum">
            </el-input>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==1" style="padding: 20px 20px;width: 100%;">
        <el-form :model="ljsform" :rules="ljsrules" ref="ljsform" label-width="120px">
          <el-form-item label="可用域:">
            <el-select v-model="ljsform.availableDomain" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in configure.available_domain" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资源类型:">
            <div style="display: flex;padding-top: 8px;">
              <el-radio-group v-model="ljsform.cloudFlavorCode">
                <el-radio style="margin-bottom: 10px;" v-for="(item,index) in configure.wlfwqList" :key="index"
                  :label="item.code">{{item.serviceName}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="规格:" prop="projectname" style="margin-top: -10px;">
            <span v-for="(item,index) in configure.wlfwqList" :key="index"
              v-if="ljsform.cloudFlavorCode==item.code">{{item.remark}}</span>
          </el-form-item>
          <el-form-item label="操作系统:" prop="osType">
            <el-select style="width: 200px;" v-model="ljsform.osType" @change="cascaderChange($event,'ljsform')" placeholder="请选择操作系统版本" size="mini">
              <el-option
                v-for="item in this.configure.czxtList"
                :key="item.serviceNumber"
                :label="item.serviceName"
                :value="item.serviceNumber">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作系统版本:" prop="osName">
            <!-- 请选择操作系统版本 -->
            <el-select v-model="ljsform.osName" @change="ChangeCzxtVersion($event,'ljsform')" placeholder="请选择操作系统版本" size="mini" style="width: 200px;">
              <el-option
                v-for="item in this.CzxtVersion"
                :key="item.code"
                :label="item.serviceName"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="!editFlag" label="主机别名:" prop="instanceName">
            <el-input style="width: 200px;" placeholder="请输入" v-model="ljsform.instanceName">
            </el-input>
          </el-form-item>
          <el-form-item v-if="!editFlag" label="数量(1~50):" prop="instanceNum">
            <el-input @input="InputljsformUnstanceNum" style="width: 200px;" size="mini" type="number" min="1" max="50" placeholder="请输入申请的服务器数量"
              v-model="ljsform.instanceNum">
            </el-input>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==2" style="padding: 20px 20px;width: 100%;">
        <el-form :model="sjkform" :rules="sjkrules" ref="sjkform" label-width="100px">
          <el-form-item label="类型:">
            <el-radio-group v-model="sjkform.serverCode">
              <el-radio v-for="(item,index) in configure.sjkList" :key="index" :label="item.code">{{item.serviceName}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="位数:">
            <el-radio-group v-model="sjkform.systemDigits">
              <el-radio label="64位">64位</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostId">
            <el-select v-model="sjkform.hostId" placeholder="请选择" size="mini" style="width: 200px;">
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="typeIndex==3" style="padding: 20px 20px;width: 100%;">
        <el-form :model="cpform" :rules="cprules" ref="cpform" label-width="100px">
          <el-form-item label="存储类型:">
            <el-radio-group v-model="cpform.productCode" @change="productCodeChange">
              <el-radio label="共享型">共享型</el-radio>
              <el-radio label="服务型">服务型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务类型:">
            <el-radio-group v-model="cpform.diskCode">
              <el-radio :label="cpform.productCode=='共享型'?'共享存储':'视频云存储'">{{cpform.productCode=='共享型'?'共享存储':'视频云存储'}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="磁盘:">
            <div style="display: flex;">
              <el-select v-model="cpform.diskServerCode" placeholder="请选择" size="mini" style="width: 200px;">
                <el-option v-for="item in  cpform.productCode=='共享型'?configure.ccList:configure.fwcpList"
                  :key="item.code" :label="item.serviceName" :value="item.code">
                </el-option>
              </el-select>
              <el-input size="mini" maxlength='7' style="width: 150px;margin-left:20px" v-model="cpform.dataDiskSize"></el-input>GB
            </div>
          </el-form-item>
          <el-form-item label="服务器:" prop="hostIds" v-if="cpform.productCode=='共享型'">
            <el-select v-model="cpform.hostIds" multiple clearable placeholder="请选择" size="mini" style="width: 410px;">
              <el-option v-for="item in hosts" :key="item.id" :label="EchoName(item)" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
import {
    serviceByClazz,XCspecEcs
} from "@/api/resources/apply";
  import {
    v4 as uuidv4
  } from 'uuid';
  export default {
    name: "addBdialogXc",
    components: {},
    props: {
      configure: {
        type: Object,
        default: {
          available_domain: [], //可用域
          cloud_service_provider: [], //服务商
          storage_type: [], //系统盘类型
          codeList: [], //云服务器规格列表
          czxtList: [], //操作系统列表
          ccList: [], //数据盘类型
          fwcpList: [], //服务型磁盘类型
          wlfwqList: [], //高性能服务器资源类型
          sjkList: [], //数据库类型,
          CpuFrameworkList:[],//CPU架构,
          SpecificationsList:[]
        }
      },
      hosts: {
        type: Array,
        default: []
      },
      addShow: {
        type: Number,
        default: 1
      },
      supplierCode: {
        type: String,
        default: ""
      },
    },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if(this.form.osDisk.diskServerCode && this.form.osDisk.dataDiskSize){
          callback();
        }else{
          callback(new Error('请选择系统盘'));
        }
      };
      return {
        osServerCode:'',
        Specifications:'',
        SpecificationsList:[],
        CzxtVersion:[],
        //是否是修改
        editFlag: false,
        //资源类型
        types: [{
            name: '云服务器',
            code: 'yzj'
          },
          {
            name: '高性能服务器',
            code: 'wlfwq'
          },
          {
            name: '数据库',
            code: 'sjk'
          },
          {
            name: '存储产品',
            code: 'cc'
          },
        ],
        typeIndex: 0,
        //云服务器数据
        form: {
          flavorType: 1, //主机类型 1 虚拟化主机 2 高性能物理机
          availableDomain: '', //可用域
          cloudFlavorCode: '', //规格分类
          Specifications:'',
          cpuNumber: '', //CPU核数
          cpuServerCode:'',
          memorySize : '',//内存条容量
          memoryServerCode : '1Gnc',
          osDisk: {
            diskServerCode: '',
            dataDiskSize: ''
          }, //系统盘

          osType:'',//父级操作系统
          osServerCode: '', //操作系统code
          osName: '', //操作系统名称
          CzxtVersionCode:'',//操作系统版本

          disks: [], //数据盘列表
          instanceName: '云服务器', //主机名称
          instanceNum: 1, //数量
        },
        //高性能服务器数据
        ljsform: {
          flavorType: 2, //主机类型 1 虚拟化主机 2 高性能物理机
          availableDomain: '', //可用域
          cloudFlavorCode: '', //资源类型
          osType:'',//父级操作系统
          osServerCode: '', //操作系统code
          osName: '', //操作系统名称
          disks: [], //数据盘列表
          instanceName: '高性能服务器', //主机名称
          instanceNum: 1, //数量
        },
        //数据库数据
        sjkform: {
          serverCode: '', //数据库类型
          databaseVersion: 'xcdb_rdjc', //数据库版本
          systemDigits: '64位', //位数
          hostId: '', //服务器
        },
        //存储产品数据
        cpform: {
          productCode: '共享型', //存储类型
          diskCode: '共享存储', //服务类型
          diskServerCode: '', //磁盘类型
          dataDiskSize: 500, //磁盘大小
          hostIds: [] //服务器
        },
        rules: {
          instanceName: [{
            required: true,
            message: '请输入主机别名',
            trigger: 'blur'
          }, ],
          instanceNum: [{
              required: true,
              message: '请输入申请的服务器数量',
              trigger: 'blur'
            },
          ],
          osName:[
            {
              required: true,
              message: '请选择系统版本',
              trigger: 'change'
            }
          ],
          osDisk: [{required: true, validator: validatePass2, trigger: 'change'}],
          osType:[
            {
              required: true,
              message: '请选择操作系统',
              trigger: 'change'
            }
          ],
          cpuServerCode:[
            {
              required: true,
              message: '请选择CPU架构',
              trigger: 'change'
            }
          ],
          Specifications:[
            {
              required: true,
              message: '请选择规格',
              trigger: 'change'
            }
          ],
        },

        ljsrules: {
          instanceName: [{
            required: true,
            message: '请输入主机别名',
            trigger: 'blur'
          }, ],
          instanceNum: [{
              required: true,
              message: '请输入申请的服务器数量',
              trigger: 'blur'
            }
          ],
          osName:[
            {
              required: true,
              message: '请选择系统版本',
              trigger: 'change'
            }
          ],
          osType:[
            {
              required: true,
              message: '请选择操作系统',
              trigger: 'change'
            }
          ],
        },
        sjkrules: {
          hostId: [{
            required: true,
            message: '请选择服务器',
            trigger: 'change'
          }, ],
        },
        cprules: {
          hostIds: [{
            required: true,
            message: '请选择服务器',
            trigger: 'change'
          }, ],
        },



        radio: "1",

        radio1: "1",
        options: ['分布式存储', '1', '2', '3', '4', '5'],
        selectValue: '',

        options2: [{
          value: 'win',
          label: 'windows',
          children: [{
            value: 'win7',
            label: 'win7'
          }, {
            value: 'win10',
            label: 'win10'
          }]
        }],
        value: '',
        shujupan: [],
        hulianwang: [],
        wangkapeizhi: [],
        duankou: [],
        checked1: false,
        checked2: false,
        checked3: false,
        demoList: [{
          a: '浪潮云',
          j: '云服务器',
          b: 4,
          c: 8,
          d: 8,
          e: 128,
          f: '分布式存储',
          g: `windows/win10`,
          h: ['分布式存储，4GB，数量：2', '分布式存储，8GB，数量：3'],
          i: 1
        }],
      };
    },
    created() {
      // 获取信创CPU或者内存规格
      // XCspecEcs({Inspur:this.supplierCode}).then(res=>{
      //   this.SpecificationsList = res.rows
      // })
    },
    methods: {
		inputNumber(e){
		  let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value)
		  if(!boolean){
		    this.$message.warning("请输入正整数")
		    e.target.value=''
		  }
		},
      InputUnstanceNum(val){
        if(val > 50){
          this.form.instanceNum = 50
        }else{
          this.form.instanceNum = val
        }
      },
      InputljsformUnstanceNum(val){
        if(val > 50){
          this.ljsform.instanceNum = 50
        }else{
          this.ljsform.instanceNum = val
        }
      },
      cloudFlavorCodes(val){
        return
        this.configure.codeList.some((item) => {
            if (val == item.specCode) {
                item.details.forEach((it) => {
                    if (it.serviceCode == "vcpu") {
                        this.form.cpuNumber = it.serviceCount;
                    }
                    if (it.serviceCode == "memory") {
                        this.form.memorySize = it.serviceCount;
                        this.form.memoryServerCode = '1Gnc';
                    }
                });
                return;
            }
        });
      },
      // 云服务器规格选择
      ChangeSpecifications(val){
        this.configure.SpecificationsList.forEach(item=>{
          if(item.specName == val){
            this.form.Specifications = val
            this.form.cpuNumber = item.cpuNumber
            this.form.memorySize = item.memorySize
            this.form.memoryServerCode = item.memoryCode;
          }
        })
        this.$forceUpdate();
      },
      // 回显服务器名称
      EchoName(item) {
        if (item.hostName) {
          if (item.existOnRep == true) {
            return item.hostName + '（已存在）'
          } else {
            return item.hostName
          }
        } else {
          if (item.existOnRep == true) {
            return item.instanceName + '（已存在）'
          } else {
            return item.instanceName
          }
        }
      },
      //提交
      submit() {
        let formName = this.typeIndex == 0 ? 'form' : this.typeIndex == 1 ? 'ljsform' : this.typeIndex == 2 ?
          'sjkform' : 'cpform';
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addShow == 1 && (this.typeIndex==0 || this.typeIndex == 1)) {
              this[formName].id = uuidv4()
            }
            this.$emit('addTable', this[formName])
            this.$refs.form.resetFields()
            this.$refs.ljsform.resetFields()
            this.$refs.sjkform.resetFields()
            this.$refs.cpform.resetFields()
          } else {
            return false;
          }
        });
      },
      //获取操作系统名称
      cascaderChange(data,name) {
        if(name){
            this[name].osServerCode = ''
            this[name].osName = ''
        }
        serviceByClazz({ code: data,supplier:this.supplierCode }).then(res=>{
          this.CzxtVersion = res.data
        })
        return
        data.forEach(item=>{
          if(item.code == this[name].osServerCode[this[name].osServerCode.length - 1]){

            // getDicts(item.code).then(res=>{
            //   if(type){
            //     this[name].osName = null
            //   }
            //   this.CzxtVersion = res.data
            // })
          }
        })
      },
      // 选择指定操作系统
      ChangeCzxtVersion(val,name){
        this.CzxtVersion.forEach(item=>{
            if(item.code == val){
                this[name].osServerCode = item.code
                this[name].osName = item.serviceName
            }
        })
      },
      //存储类型变化
      productCodeChange(e) {
        if (e == '共享型') {
          this.cpform.diskServerCode = this.configure.ccList[0].code
          this.cpform.diskCode = '共享存储'
        } else {
          this.cpform.diskServerCode = this.configure.fwcpList[0].code
          this.cpform.diskCode = '视频云存储'
        }
      },
      //初始化
      init(data) {
        this.editFlag = false
        if (data) {
          this.editFlag = true
          if (data.flavorType && data.flavorType == 1) {
            this.$refs.form.resetFields()
            this.typeIndex = 0
            this.form = data
            this.configure.SpecificationsList.forEach(item=>{
              if(item.cpuNumber == this.form.cpuNumber && item.memorySize == this.form.memorySize){
                this.form.Specifications = item.specName
              }
            })
            this.cascaderChange(this.form.osType)
          } else if (data.flavorType && data.flavorType == 2) {
            this.$refs.ljsform.resetFields()
            this.typeIndex = 1
            this.ljsform = data
            this.cascaderChange(this.ljsform.osType)
          } else if (data.serverCode) {
            this.$refs.sjkform.resetFields()
            this.typeIndex = 2
            this.sjkform = data
          } else if (data.diskServerCode) {
            this.typeIndex = 3
            this.cpform = data
            if(!data.hostIds||!data.hostIds.length){
              if(data.hosts&&data.hosts.length){
                this.cpform.hostIds = []
                data.hosts.forEach(i => {
                  this.cpform.hostIds.push(i.id)
                })
              }
            }
          }
        } else {
          this.form.availableDomain = this.configure.available_domain[0].dictValue
          // this.form.cloudFlavorCode = this.configure.codeList[0].specCode
          // this.cloudFlavorCodes(this.configure.codeList[0].specCode)
          this.ChangeSpecifications(this.configure.SpecificationsList[0].specName)
          this.form.osDisk = {
            diskServerCode: this.configure.storage_type[0].code,
            dataDiskSize: 160
          }
          this.form.osType = this.configure.czxtList[0].serviceNumber //默认选中父级操作系统
          // this.form.osServerCode = [this.configure.czxtList[0].code]

          this.ljsform.availableDomain = this.configure.available_domain[0].dictValue
          this.ljsform.cloudFlavorCode = this.configure.wlfwqList[0].code
          this.ljsform.osServerCode = [this.configure.czxtList[0].code]

          this.sjkform.serverCode = this.configure.sjkList[0].code
          if (this.hosts.length) {
            this.sjkform.hostInstanceName = this.hosts[0].hostName
          }
          if(this.cpform.diskServerCode){
              this.cpform.diskServerCode = this.cpform.diskServerCode
          }else{
            this.cpform.diskServerCode = this.configure.ccList[0].code
          }
          this.form.osDisk = {}
          this.cascaderChange(this.form.osType)
          // this.cascaderChange(this.form.osType,this.configure.czxtList, 'ljsform',true)
        }

      }
    }
  };
</script>
<style>
  .el-form-item--medium .el-form-item__label {
    text-align: left !important;
  }
</style>
<style scoped lang="less">
  .dialog {
    // max-height: calc(75vh - 160px);
    padding-right: 20px;

    // overflow-y: scroll;
    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    i {
      line-height: 28px;
      margin-right: 10px;
      font-size: 20px;
      color: #E83112;
    }

    .wrap {
      display: flex;
      background: #faf9ff;
      margin-top: 20px;
      border-radius: 10px;

      .wrap_title {
        padding: 0 10px;
        background: #f4f4f4;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        div {
          height: 100%;
          width: 14px;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .wrap_item {
        display: flex;
        margin-top: 20px;

        div:first-child {
          width: 90px;
          font-weight: bold;
        }


      }
    }



    .msg {
      padding: 0 20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      border-radius: 10px;

      .wra2p {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      .item {
        margin-left: 20px;
        width: calc(33.33% - 20px);
        min-width: 340px;
        display: flex;
      }
    }
  }
</style>
